<template>
	<div class="change-nickname-background">
		<div class="change-nickname-container">
			<!--新昵称-->
			<div class="line"> 
				新昵称
				<input class="nickname-input" type="text" v-model="newNickName" placeholder="请输入新昵称" />
			</div>
			<!--按钮-->
			<div class="line">
				<wd-button @click="changeNickName">确定</wd-button>
				<wd-button type="info" @click="closeCom">取消</wd-button>
			</div>
		</div>
	</div>
	
</template>

<script setup>
	import { defineEmits, ref } from 'vue'
	import { globalProps } from '@/js/global.js'
	
	const emit = defineEmits(['close', 'changeNickName'])
	const closeCom = (e)=>{
		emit('close', e)
	}
	const newNickName = ref()
	const changeNickName = (e)=>{
		if(newNickName.value.length < 2){
			uni.showToast({
				icon: 'error',
				title: '新昵称过短'
			})
			return
		}
		if(newNickName.value.length > 8){
			uni.showToast({
				icon: 'error',
				title: '新昵称过长'
			})
			return
		}
		globalProps.userInfo.nickname = newNickName.value
		uni.request({
		  url: 'http://localhost:7349/users/',
		  method: 'PUT',
		  data: globalProps.userInfo,
		  success: function (res) {
		    uni.showToast({
		    	title: '更新昵称成功',
				icon: 'success'
		    })
			emit('close', e)
			emit('changeNickName', newNickName.value)
		  },
		  fail: function (err) {
		    console.log('PUT请求失败', err);
		    uni.showToast({
		    	title: '更新昵称失败',
		    	icon: 'error'
		    })
		  }
		});
	}
</script>

<style>
	.change-nickname-background{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #00000044;
		backdrop-filter: blur(10px);
	}
	.change-nickname-container{
		position: absolute;
		left: 50%;
		top: 50%;
		width: 80%;
		height: 140px;
		padding-top: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translate(-50%, -50%);
		animation: pop-up-ani .4s 1;
		background-color: #4942adaa;
		border-radius: 8px;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
	@keyframes pop-up-ani{
		0%{
			opacity: 0;
			transform: translate(-50%, 50%) scale(0);
		}
		20%{
			opacity: 0;
			transform: translate(-50%, 50%) scale(0);
		}
	}
	.change-nickname-container .line{
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 90%;
		color: #fff;
	}
	.nickname-input{
		color: #fff;
		border-bottom: 1px solid #555;
		padding: 4px;
		width: calc(100% - 100px);
	}
</style>